<template>
  <van-nav-bar title="分类" />
  <van-row>
    <!-- 左 -->
    <van-col span="6">
      <van-sidebar v-model="active">
        <van-sidebar-item v-for="item in wupinData" :title="item.cat_name" />
      </van-sidebar>
    </van-col>
    <!-- 右 -->
    <van-col span="18">
        <div v-for="i in wupinData[active]?.children">
          <h4>{{ i.cat_name }}</h4>
          <!-- 跳转到商品 携带cat_id -->
          <router-link :to="'/goods/' + i.cat_id">
            <!-- 宫格 -->
            <van-grid :column-num="4">
              <van-grid-item
                v-for="i in i.children"
                :icon="i.cat_icon"
                :text="i.cat_name"
              />
            </van-grid>
          </router-link>
        </div>
    </van-col>
  </van-row>
</template>

<script setup>
import { wupinApi } from "@/api/api";
import { ref } from "vue";
let wupinData = ref([]);
let active = ref(0);
wupinApi().then((res) => {
  console.log("物品", res);
  wupinData.value = res.data.message;
});
</script>

<style lang="scss" scoped>
</style>